<template>
	<view class="popup" v-if="visible" @touchmove.stop.prevent @click="cancel">
		<up-transition :show="true">
			<view class="panel" @touchmove.stop.prevent @click.stop>
				<view class="panel-head">绑定身份信息</view>
				<view class="panel-tips">
					当前身份证号已有账号绑定，请输入账号中间四位进行身份验证
				</view>
				<view class="panel-info">
					<view class="panel-info-left">{{ form.front || '-' }}</view>
					<view class="panel-info-center">
						<up-code-input v-model="form.sub_mobile" size="calc(76rpx - 2px)" space="12rpx" :maxlength="4"
							borderColor="#E5E5E5" />
					</view>
					<view class="panel-info-right">{{ form.after || '-' }}</view>
				</view>
				<view class="panel-footer">
					<view class="panel-footer-btn panel-footer-cancel" @click="cancel">取消</view>
					<view class="panel-footer-btn panel-footer-confirm" @click="confirm">验证身份</view>
				</view>
			</view>
		</up-transition>
	</view>
</template>

<script lang="ts" setup>
	import api from "@/api"
	import { useAuth } from "@/store/auth"
	const Auth = useAuth()
	const emit = defineEmits(['closed', 'success', 'confirm'])
	const props = defineProps({
		confirmMethods: {
			type: Boolean,
			default: false
		}
	})
	const visible = ref(false)
	const form = ref({
		identity_card: "",
		front: "",
		after: "",
		sub_mobile: "",
		is_bind: 1
	})
	const confirm = async () => {
		const buildData = {
			...form.value
		}
		const res = await api.user.user.mergeUser.post(buildData)
		if (res?.code === 1) {
			if (props.confirmMethods) {
				emit("confirm", res.data)
				return
			}
			uni.showToast({
				title: '合并成功',
				icon: 'none',
				mask: true
			})
			Auth.SET_TOKEN(res.data.app_token)
			Auth.GetUserInfo();
			uni.$u.sleep(1000).then(() => {
				emit("success", buildData)
			})
		}
	}
	const cancel = () => {
		visible.value = false
		emit("closed")
		return
	}
	const open = (data: any) => {
		Object.assign(form.value, {
			identity_card: "",
			front: "",
			after: "",
			sub_mobile: "",
			is_bind: 1,
			...data
		})
		visible.value = true
		return
	}
	defineExpose({ open })
</script>

<style lang="scss" scoped>
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100vh;
		width: 100%;
		z-index: 999;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.panel {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(181, 181, 181, 0.1);
		border-radius: 16rpx;
		width: calc(100vw - 100rpx);
		padding: 40rpx 0 48rpx 0;
		overflow: hidden;
		position: relative;

		&-head {
			font-weight: 400;
			font-size: 32rpx;
			color: #000000;
			line-height: 44rpx;
			margin-bottom: 32rpx;
			text-align: center;
		}

		&-tips {
			background: #F4E4E5;
			box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(181, 181, 181, 0.1);
			border-radius: 8rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: var(--themeColors);
			line-height: 36rpx;
			padding: 16rpx 20rpx;
			width: calc(100% - 104rpx);
			margin: 0 auto;
			margin-bottom: 40rpx;
			text-align: center;
		}

		&-info {
			width: calc(100% - 64rpx);
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			margin-bottom: 48rpx;

			&-left {
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
				flex-shrink: 0;
			}

			&-center {
				margin: 0 20rpx;
			}

			&-right {
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
				flex-shrink: 0;
			}
		}

		&-footer {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-btn {
				width: calc((100% - 26rpx) / 2 - 4rpx);
				height: 68rpx;
				border-radius: 8rpx;
				border: 2rpx solid #B5B5B5;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 40rpx;
			}

			&-cancel {
				border: 2rpx solid #B5B5B5;
				color: #666666;
			}

			&-confirm {
				background: var(--themeColors);
				border: 2rpx solid var(--themeColors);
				color: #FFFFFF;
			}
		}
	}
</style>
